<route lang="json5">
{
  style: {
    navigationBarTitleText: '生日提醒',
    navigationStyle: 'custom',
    // #ifdef MP-ALIPAY
    enablePullDownRefresh: false,
    'mp-alipay': {
      allowsBounceVertical: 'NO',
      transparentTitle: 'always',
      titlePenetrate: 'YES',
      defaultTitle: '',
    },
    // #endif
  },
}
</route>
<template>
  <CustomNavbar :title="'备忘提醒'" />
  <view class="person-msg" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <uni-forms class="form" ref="form" :modelValue="form">
      <uni-forms-item label="标题" name="nickname">
        <uni-easyinput type="text" v-model="form.name" placeholder="请输入" />
      </uni-forms-item>
      <!-- <uni-forms-item label="生日" name="birthday">
        <picker mode="date" :value="form.birthday" @change="birthdayChange">
          <view>{{ form.birthday ? form.birthday : '请选择' }}</view>
        </picker>
      </uni-forms-item> -->
      <uni-forms-item label="提醒日期" name="remindDate">
        <view style="display: flex; flex-direction: row; justify-content: space-around">
          <picker mode="date" :value="form.remindDate" @change="dateChange">
            <view>{{ form.remindDate ? form.remindDate : '选择日期' }}</view>
          </picker>
          <picker mode="time" :value="form.remindDate" @change="timeChange">
            <view>{{ form.remindTime ? form.remindTime : '选择时间' }}</view>
          </picker>
        </view>
      </uni-forms-item>
      <uni-forms-item label="提示语" name="nickname">
        <uni-easyinput type="text" v-model="form.remark" placeholder="" />
      </uni-forms-item>

      <!-- <uni-forms-item label="手机号" name="phone">
        <uni-easyinput type="text" v-model="form.phone" placeholder="请输入手机号" />
      </uni-forms-item> -->
    </uni-forms>
    <div class="bottom">
      <view class="submit" @click="submit">确定</view>
      <view class="submit quiteLoginOut" @click="cancel">取消</view>
    </div>
  </view>
</template>

<script lang="ts" setup>
import CustomNavbar from '@/components/CustomNavbar.vue'
import { birthdayRemindApi } from '@/service/global'
import { BirthdayRemind } from '@/types/birthdayRemind'
import { useBirthdayRemind } from '@/store/birthdayRemind'

const birthdayRemindRef = useBirthdayRemind()
const form = birthdayRemindRef.birthdayRemind

onLoad(async () => {})

const birthdayChange = (ev) => {
  form.birthday = ev.detail.value
}
const dateChange = (ev) => {
  form.remindDate = ev.detail.value
}
const timeChange = (ev) => {
  form.remindTime = ev.detail.value
}

const submit = async () => {
  uni.showLoading({ title: '提交中...' })
  await birthdayRemindApi(form)
  wx.requestSubscribeMessage({
    tmplIds: ['atm3KRJx6b4BIsQg5RDo1S0F9JnLBc4A4-jcHevYQ0U'],
    complete: (complete) => {
      console.log('complete', complete)
      uni.hideLoading()
      uni.navigateBack()
      uni.showToast({ icon: 'none', title: '提交成功' })
    },
  })
}
const cancel = () => {
  uni.navigateBack()
}

// 获取屏幕安全区域
const { safeAreaInsets } = uni.getSystemInfoSync()
console.log(safeAreaInsets)
</script>

<style lang="scss">
.head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #909399;
}

.uni-forms {
  padding: 0;
  margin-top: 10rpx;
  background-color: #ffffff;
  .uni-forms-item {
    height: 110rpx;
    padding: 0 20rpx;
    line-height: 110rpx;
  }
}
.form {
  background-color: #ffffff;
}
.bottom {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  > .submit {
    width: 40%;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    text-align: center;
    background-color: $main-color;
  }
}

.radio {
  margin-right: 50rpx;
}

.quiteLoginOut {
  background-color: $font-color-base !important;
  // color: #ff6b35 !important;
}
</style>
